.pxToRem(@p, @px){
    @{p}: @px / 75px * 1rem;
}

.header{
    .pxToRem(height, 90);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left{
        .pxToRem(width, 44);
        .pxToRem(height, 44);
        background: #d2d2d2;
        border-radius: 50%;
        .pxToRem(margin-left, 20);
        b{
            text-align: center;
            .pxToRem(margin-left, 12);
            .pxToRem(font-size, 28);
            color:#fff; 
        }
    }
    span{
        .pxToRem(font-size, 35);
    }
    .right{
        img{
            .pxToRem(width, 44);
            .pxToRem(height, 44);
            .pxToRem(margin-right, 30);
        }
    }
}
.section{
    width:100%;
    .pxToRem(height, 100);
    background: #ffeed8;
    display: flex;
    .item{
        flex: 1;
        .pxToRem(height,100);
        text-align: center;
    }
    .orange{
        background: orange;
    }
    img{
        .pxToRem(height,35);
        .pxToRem(width,35);
        .pxToRem(line-height,1.33rem);
        
    }
    dt{
        .pxToRem(margin-top, 15)
    }
    dd{
        color:#fff;
        .pxToRem(font-size,22)
    }
}
.color{
    width:100%;
    p{
        .pxToRem(margin-left, 32);
        .pxToRem(font-size, 26);
        .pxToRem(margin-top, 15);
        .pxToRem(margin-bottom, 15);
        color: #b8b8b8;
    }
    .list{
        .pxToRem(margin-left, 32);
        .pxToRem(height, 60);
        display: flex;
        li{
            float: left;
            flex: 1;
            .pxToRem(line-height, 60);
            .pxToRem(margin-right, 18);
            text-align: center;
            justify-content: center;
            align-items: center;
            background:#f1f1f1;
            border-radius: 8px;
            color:#666;
        }
    }
    ul li:first-child{
        background:orange;
        color:#fff;
    }
    ul li:last-child{
        .pxToRem(margin-right, 30);
    }
}
.pin{
    width:100%;
    p{
        .pxToRem(margin-left, 30);
        .pxToRem(margin-top, 20);
        .pxToRem(margin-bottom, 15);
        .pxToRem(font-size, 26);
        color: #b8b8b8;
    }
    .left{
        background: #f3981c;
        color:#fff;
        display: inline-block;
        border-radius: 8px;
        .pxToRem(margin-left, 30);
        .pxToRem(padding, 16);
        .pxToRem(font-size, 24);
        span{
            .pxToRem(font-size, 16);
        }
    }
    .right{
        background: #f1f1f1;
        color:#666;
        display: inline-block;
        .pxToRem(padding, 16);
        .pxToRem(padding-left, 56);
        .pxToRem(padding-right, 56);
        .pxToRem(margin-left, 18);
        .pxToRem(font-size, 24);
        border-radius: 8px;
    }
}
.hua{
    width:100%;
    p{
        .pxToRem(margin-left, 30);
        .pxToRem(margin-top, 18);
        .pxToRem(margin-bottom, 14);
        .pxToRem(font-size, 25);
        color: #b8b8b8;
    }
    .list{
        .pxToRem(margin-left, 30);
        .pxToRem(height, 60);
        display: flex;
        li{
            flex: 1;
            .pxToRem(line-height, 60);
            .pxToRem(width, 100);
            .pxToRem(height, 60);
            .pxToRem(margin-right, 18);
            text-align: center;
            justify-content: center;
            align-items: center;
            background:#f1f1f1;
            border-radius: 8px;
            color:#666;
        }        
    }
    ul li:first-child{
        background:orange;
        color:#fff;
    }
    .list li:last-child{
        .pxToRem(margin-right, 30);
    }
}
.deng{
    .pxToRem(margin-left, 30);
    p{
        .pxToRem(margin-top, 20);
        .pxToRem(margin-bottom, 16);
        .pxToRem(font-size, 26);
        color: #999999;
        span{
            float: right;
            .pxToRem(font-size, 22);
            .pxToRem(margin-right, 30);
        }
    }
    .left{
        background: #f3981c;
        color:#fff;
        display: inline-block;
        border-radius: 8px;
        .pxToRem(padding, 16);
        .pxToRem(padding-left, 26);
        .pxToRem(padding-right, 26);
        .pxToRem(font-size, 24);
        span{
            .pxToRem(font-size, 16);
        }
    }
    .right{
        background: #f1f1f1;
        color:#666;
        display: inline-block;
        .pxToRem(padding, 16);
        .pxToRem(padding-left, 26);
        .pxToRem(padding-right, 26);
        .pxToRem(margin-left, 18);
        .pxToRem(font-size, 24);
        border-radius: 8px;
    }
}
.tu{
    width:100%;
    p{  
        .pxToRem(margin-left, 30);
        .pxToRem(margin-top, 20);
        .pxToRem(margin-bottom, 16);
        .pxToRem(font-size, 26);
        color: #999999;
    }
}
.img{
    width:100%;
    .pxToRem(height, 216);
    .pxToRem(margin-bottom, 10);
    display: flex;
    justify-content: space-between;
    align-items:center;
    div{
        .pxToRem(width, 216);
        .pxToRem(height, 216);
        border:1px solid #f2f2f2;
        border-radius: 5px;
        img{
            .pxToRem(width, 156);
            .pxToRem(height, 128);
            .pxToRem(margin-left, 24);
            .pxToRem(margin-top, 34);
        }
    }
    .left{
        .pxToRem(margin-left, 30);
        img{
            .pxToRem(width, 190);
            .pxToRem(height, 105);
            .pxToRem(margin-left, 14);
            .pxToRem(margin-top, 46);
        }
    }
    .right{
        .pxToRem(margin-right, 30);
    }
}
.jian{
    width:100%;
    .pxToRem(margin-top, 10);
    p{
        color:#b8b8b8;
        .pxToRem(margin-top, 20);
        .pxToRem(font-size, 24);
        .pxToRem(margin-left, 30);
    }
}
.ren{
    width:100%;
    .pxToRem(margin-top, 24);
    .pxToRem(height, 146);
    .pxToRem(font-size, 25);
    color:#999999;
    border-top:1px solid #c5c5c5;
    border-bottom: 1px solid #c5c5c5;
    p{
        .pxToRem(margin-left, 30);
        .pxToRem(margin-top, 32);
        .span{
            float: right;
            .pxToRem(margin-right, 30)
        }
    }
    p:last-child{
        .pxToRem(margin-bottom, 30);
    }
    span{
        .pxToRem(margin-left, 9);
        img{
            .pxToRem(width, 30);
            .pxToRem(height, 20             );
        }
    }
}
.tujian{
    width:100%;
    background: #f6f6f6;
    display: none;
    section{
        width:100%;
        display: flex;
        flex:1;
        .pxToRem(margin-left, 30);
        .pxToRem(height, 84);
        border-bottom: 1px solid #e7e7e7;
        div{
            .pxToRem(line-height, 84);
            .pxToRem(font-size, 22);
            color:#666666;
        }
    }
    section div:first-child{
        .pxToRem(width, 354);
    }
    section div:nth-child(2){
        color:orange;
    }
    .jian{
        .pxToRem(width, 52);
        .pxToRem(height, 52);
        .pxToRem(margin-left, 80);
        .pxToRem(line-height, 52);
        .pxToRem(margin-top, 13);
        background: orange;
        color:#fff;
        text-align: center;
        border-radius: 50%;
    }
    .last{
        .pxToRem(width, 52);
        .pxToRem(height, 52);
        .pxToRem(line-height, 52);
        .pxToRem(margin-top, 13);
        background: orange;
        color:#fff;
        text-align: center;
        border-radius: 50%;
    }
    .lasts{
        .pxToRem(margin-left, 196);
    }
    .shi{
        .pxToRem(margin-right, 20);
        .pxToRem(margin-left, 14);
    }
}
.yi{
    .pxToRem(height, 74px);
    .pxToRem(margin-bottom, 120);
    width:100%;
    border-bottom:1px solid #dddddd;
    p{
        .pxToRem(margin-left, 30);
        .pxToRem(line-height, 74);
        .pxToRem(font-size, 22);
        color:#999999;
        .gai{
            .pxToRem(padding, 8);
            border:1px solid orange;
            color:orange;
            border-radius: 50%;
        }
    }
    p span:first-child{
        color:orange;
        .pxToRem(font-size, 24);
        .pxToRem(margin-right, 24);
    }
    p span:last-child{
        float: right;
        .pxToRem(margin-right, 30);
    }
}
.footer{
    display: flex;
    position: fixed;
    left:0;
    bottom:0;
    width:100%;
    .pxToRem(height, 120);
    background:#f1f1f1;
    color:#666666;
    .item{
        .pxToRem(width, 120);
        .pxToRem(height, 120);
        border-right:1px solid #dddddd;
        text-align: center;
        dt{
            img{
                .pxToRem(margin-top, 30);
                .pxToRem(width, 32);
                .pxToRem(height, 32);
            }
        }
        dd{
            .pxToRem(font-size, 22);
            .pxToRem(margin-top, 10);
        }
    }
    .jian{
        .pxToRem(margin-left, 230);
        .pxToRem(width, 80);
        .pxToRem(height, 80);
        .pxToRem(line-height, 80);
        .pxToRem(margin-top, 20);
        border-radius: 50%;
        background: orange;
        text-align: center;
        color:#fff;
    }
    .shi{
        .pxToRem(margin-left, 25);
        .pxToRem(margin-right, 32);
        .pxToRem(line-height, 120);
        .pxToRem(font-size, 10);
    }
    .jia{
        .pxToRem(width, 80);
        .pxToRem(height, 80);
        .pxToRem(line-height, 80);
        .pxToRem(margin-top, 20);
        border-radius: 50%;
        background: orange;
        text-align: center;
        color:#fff;
    }
}
.rotate {
    transform-origin: center center;
    transform: rotate(180deg);
    transition: transform 0.3s;
  }
  .rotate1 {
    transform-origin: center center;
    transform: rotate(0deg);
    transition: transform 0.3s;
  }
.meng{
    display: none;
    width:100%;
    height: 100%;
    background:rgba(127, 127, 127, .3);
    position: fixed;
    left:0;
    top:0;
    .box{
        .pxToRem(width, 690);
        .pxToRem(height, 486);
        .pxToRem(margin-left, -345);
        background: #ffffff;
        border-radius: 10px;
        position: fixed;
        left:50%;
        .pxToRem(top, 430);
        
        .p{
            .pxToRem(height, 64);
            border-bottom:1px solid #e7e7e7;
            line-height: 0.8533rem;
            span{
                .pxToRem(margin-left, 40);
                color:#666;
                img{
                    .pxToRem(width, 32);
                    .pxToRem(height, 32);
                    float:right;
                    .pxToRem(margin-right, 30);
                    .pxToRem(margin-top, 18);
                }
            }
        }
        .p1{
            .pxToRem(margin-left, 50);
            margin-top:-5px;
        }
        .p2{
            .pxToRem(margin-left, 50);
            .pxToRem(margin-right, 88);
            color: #989898;
            margin-top:-5px;
        }
        input{
            .pxToRem(margin-left, 50);
            .pxToRem(width, 590);
            .pxToRem(height, 70);
            border-radius: 5px;
        }
        [type=button]{
            background: orange;
            .pxToRem(margin-top, 50);
            border:none;
            color:#fff;
        }
    }
}
.chakan{
    display: none;
    width:100%;
    height: 91%;
    background:rgba(127, 127, 127, .3);
    position: fixed;
    left:0;
    top:0;
    .box{
        width:100%; 
        background: #ffffff;
        position: fixed;
        .pxToRem(height, 620);
        .pxToRem(bottom, 120);
        left:0;
        .p1{
            .pxToRem(width, 690);
            .pxToRem(height, 65);
            .pxToRem(line-height, 65);
            .pxToRem(margin-left, 30);
            .pxToRem(font-size, 24);
            color: #979797;
            border-bottom:1px solid #e7e7e7;
            span{
                img{
                    float: right;
                    .pxToRem(width, 32);
                    .pxToRem(height, 32);
                    .pxToRem(margin-top, 20);
                }
            }
        }
        p{
            .pxToRem(width, 650);
            .pxToRem(height, 70);
            .pxToRem(margin-left, 48);
            .pxToRem(line-height, 70);
            .pxToRem(font-size, 22);
            border-bottom:1px solid #e7e7e7;
            .span{
                float:right;
                color:#999;
                span{
                    .pxToRem(margin-left, 140);
                    color:#000;
                }
            }
        }
        .footer{
            width:100%;
            .pxToRem(height, 130);
            background: #ffffff;
            position: absolute;
            left:0;
            bottom:0;
            div{
                .pxToRem(height, 80);
                .pxToRem(width, 690);
                .pxToRem(line-height, 80);
                .pxToRem(margin-top, 20);
                .pxToRem(margin-left, 30);
                background: orange;
                border-radius: 5px;
                text-align: center;
                color:#fff;
            }
            div span:first-child{
                .pxToRem(font-size, 18);
            }
            div span:nth-child(2){
                .pxToRem(font-size, 26);
            }
            div span:last-child{
                .pxToRem(font-size, 28);
            }
        }
    }
}